<template>
  <div class="login_bg">
    <span>登录</span>
    <common-login :commonData="{$parent:$parent}"></common-login>
    <div class="login_box">
      <ul class="text_center login_box_ul">
        <li>
          <router-link class="login_tab_active" to="/login"
            >个人登录</router-link
          >
        </li>
        <li><router-link to="/company_login">企业登录</router-link></li>
      </ul>
      <form class="login_form" ref="form" :model="form" @keyup.enter="toLogin(form)">
          <div class="login_input_box">
              <img class="login_icon" src="../../static/img/login/login_user.png" alt="">
              <input style="color: #333333;" type="text" v-model.trim="form.telephone" placeholder="请输入手机号或身份证号">
          </div>
          <div class="login_input_box">
              <img class="login_icon" src="../../static/img/login/login_pwd.png" alt="">
              <input style="color: #333333;" type="text" v-model.trim="form.pwd" placeholder="请输入密码">
          </div>
          <div class="login_input_box">
              <img class="login_icon" src="../../static/img/login/login_code.png" alt="">
              <input style="color: #333333;" type="text" v-model.trim="form.code" placeholder="请输入验证码">
              <!-- 验证码 -->
              <span class="login_code" id="loginCode" @click="clickCodeImg" >
                        <img :src="'data:image/png;base64,'+base64Code"  width="150px"
                            height="60px">
                    </span>
          </div>
          <p
                    style="color: #666666;text-align: center;margin-top: 30px;margin-bottom: -30px;color: #ff0000;font-size: 15px;">
                    默认账号：身份证号，密码：身份证后6位！</p>
          <div class="text_center login_btn_box">
              <div><a class="login_btn">登录</a></div>
              
              <router-link class="login_a" to="/forget_pwd">忘记密码</router-link>
                    <span>|</span>
                    <router-link class="login_a" to="/register">点击注册</router-link>
          </div>
      </form>
    </div>
  </div>
</template>

<script>
 import commonLogin from '../components/c_login.vue'
export default {
components: {"common-login": commonLogin},
  data() {
    return {
       base64Code: "",

                form: {
                    telephone: "",
                    pwd: "",
                    code: "",
                    v_token: ""
                }
    };
  },
  beforeCreate() {
            this.$cookies.set("loginInfo", undefined);
            this.$cookies.set("token", undefined);
        },
        created: function() {
            this.getImgCode();
        },
  methods:{
    clickCodeImg: function() {
                this.getImgCode();
            },
    // 获取验证码
     getImgCode:async function() {
                // console.log("执行二维码");
                // console.log(this.api.verifyCode);
                // this.$sdk.$request.post(this.api.verifyCode,{}).then(res=>{
                //     console.log(res);
                //     this.base64Code = res.base64;
                //     this.form.v_token = res.v_token;
                //     console.log('结束');
                // })

                const {data:res} = await this.axios.post(this.api.verifyCode)
                console.log("新的请求方法",res);
                this.base64Code = res.base64;
                this.form.v_token = res.v_token;
    },
    toLogin(dataForm){
      // var that = this;
      this.$sdk.$request.post(this.api.login,dataForm).then(data=>{
                    console.log(data);
                     data.resultMap.userType = 0;
                    console.log("打印data.resultMap --就是cookie信息",this.resultMap);

                    this.$cookies.set("loginInfo", data.resultMap, this.api.config
                    .tokenTime); // 设置cookie中存放的生命周期

                    this.$cookies.set("token", data.resultMap.token, this.api.config
                    .tokenTime); // 设置cookie中存放的生命周期
                    
                    this.$parent.loginInfo = data.resultMap;
                    this.$message.success("恭喜您登陆成功！");

                    this.common.toPage('/index', true);
                }).catch(err=>{
                this.$message.error("登录失败了",err.resultMsg);
            });
    }
  }
};
</script>

<style>
.login_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../../static/img/login/login_bg.jpg") center center;
  background-size: cover;
}


.login_box {
  width: 360px;
  background: #fff;
  padding: 60px;
  float: right;
  margin-right: 120px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.login_box_ul {
  width: 100%;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 90px;
}

.login_box_ul li {
  margin: 0 11px 0 11px;
  display: inline-block;
}

.login_box_ul li a {
  padding-bottom: 16px;
  font-weight: bolder;
  font-size: 22px;
  position: relative;
  top: 1px;
  display: inline-block;
}

.login_tab_active {
  border-bottom: 2px solid #0c67d0;
  color: #0c67d0;
}
.login_input_box {
  height: 69px;
  line-height: 69px;
  border-bottom: 1px solid #DDDDDD;
  padding: 0 0 0 10px;
  position: relative;
}

.login_icon {
  width: 30px;
  height: 30px;
  position: relative;
  top: 10px;
}
.login_input_box input {
  border: 0;
  outline: none;
  width: 80%;
  padding-left: 10px;
  color: #333333;
}
.login_input_box input::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #999999;
}

.login_input_box input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999999;
}

.login_input_box input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999999;
}

.login_input_box input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #999999;
}

.login_input_box input.el-input__inner {
  font-size: 16px;
  width: 300px;
}
/* .login_input_box i {
  color: #999999;
  font-size: 28px;
  position: relative;
  top: 4px;
} */
/* 验证码 */
.login_code{
    width: 100px;
    position: absolute;
  right: 0;
  top: 5px;
  cursor: pointer;
}


.login_btn_box {
  margin-top: 68px;
}

/*登录 按钮 */
.login_btn {
  background: #0C67D0;
  width: 100%;
  height: 48px;
  line-height: 48px;
  /* display: block; */
  color: #FEFEFE;
  /* margin-bottom: 20px; */
  font-size: 18px;
}
.login_btn_box span {
  margin: 0 10px;
  color: #176ED1;
}
.login_a {
  color: #176ED1;
  margin-top: 10px;
}

</style>